<template>
	<view class="setting">
		<view class="setting-item" @click="openAvatar">
			<view class="content">
				<text class="title">头像</text>
				<image class="avatar" :src="heard_img" mode="aspectFill"></image>
				<image class="arrow" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-27/20200827/c412dc67b0039da6530ab513433b5be2.png"
				 mode="aspectFill"></image>
			</view>
		</view>
		<view class="setting-item">
			<view class="content">
				<text class="title">用户账号</text>
				<text class="phone">{{phone}}</text>
			</view>
		</view>
		<view class="setting-item" @click="openModal">
			<view class="content">
				<text class="title">昵称</text>
				<text class="nickname">{{nickname}}</text>
				<image class="arrow" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-27/20200827/c412dc67b0039da6530ab513433b5be2.png"
				 mode="aspectFill"></image>
			</view>
		</view>

		<view class="sign-out-view">
			<view class="sign-out-btn" @click="signOut">
				退出登录
			</view>
		</view>

		<u-popup v-model="showModal" mode="center" width="600rpx" height="444rpx" border-radius="10">
			<view class="solt-content">
				<view class="tips">修改昵称</view>
				<u-input input-align="center" v-model="setNickname" type="text" height="80" />
				<view class="line"></view>
				<view class="btn-group">
					<view class="cancel" @click="showModal = false">取消</view>
					<view class="save" @click="save">确定</view>
				</view>
			</view>
		</u-popup>
		<u-action-sheet :list="list" v-model="show" @click="click"></u-action-sheet>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	import md5 from '@/static/utils/md5.min.js'
	export default {
		data() {
			return {
				data: {},
				list: [{
					text: '更换头像'
				}],
				show: false,
				showModal: false,
				heard_img: '',
				phone: '',
				nickname: '',
				setNickname: ''
			};
		},
		onLoad() {
			this.init()
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				// 可以在此上传到服务端
				uni.uploadFile({
					url: `${this.$domain}/api/Upimg/UpImg`,
					filePath: path,
					name: 'file',
					formData: this.data,
					complete: (res) => {
						let data = {
							heard_img: JSON.parse(res.data).datas[0],
							nickname: this.nickname
						}
						this.$u.apiWei.UserUp(data).then(ress => {
							this.heard_img = JSON.parse(res.data).datas[0]
							uni.showToast({
								icon: 'none',
								title: '上传成功'
							})
						})
					}
				});
			})
		},
		methods: {
			init() {
				this.$u.apiWei.UserInfo().then(res => {
					this.heard_img = res.datas.heard_img
					this.phone = res.datas.phone
					this.nickname = res.datas.nickname
					this.setNickname = res.datas.nickname
				})
				let req = {}
				req.timestamp = Math.round(new Date().getTime() / 1000)
				req.port = 'wechat'
				req.key = JSON.parse(uni.getStorageSync('userInfo')).token
				let obj = 'jjds2020+'
				let newData = this.objKeySort(req)
				for (let i in newData) {
					obj += i + '=' + newData[i] + '&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5(obj)
				obj = obj.toUpperCase()
				req.sign = obj
				this.data = req
			},
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
					newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			openAvatar() {
				this.show = true
			},
			click(index) {
				if (index == 0) {
					// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
					this.$u.route({
						// 关于此路径，请见下方"注意事项"
						url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
						// 内部已设置以下默认参数值，可不传这些参数
						params: {
							// 输出图片宽度，高等于宽，单位px
							destWidth: 300,
							// 裁剪框宽度，高等于宽，单位px
							rectWidth: 300,
							// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
							fileType: 'jpg',
						}
					})
				}
			},
			save() {
				let data = {
					heard_img: this.heard_img,
					nickname: this.setNickname
				}
				this.$u.apiWei.UserUp(data).then(ress => {
					this.nickname = this.setNickname
					this.showModal = false
				})
			},
			openModal() {
				this.setNickname = this.nickname
				this.showModal = true
			},
			signOut() {
				uni.showModal({
					title: '温馨提示',
					content: '是否确认退出登录？',
					success: (res) => {
						if(res.confirm){
							uni.clearStorageSync()
							// #ifdef H5
							uni.reLaunch({
								url: '/pages/login/login'
							});
							// #endif
							// #ifdef MP-WEIXIN
							uni.navigateBack()
							// #endif
							// #ifdef APP-PLUS
							uni.reLaunch({
								url: '/pages/login/app-login'
							});
							// #endif
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.setting {
		padding: 20rpx 0;

		.setting-item {
			padding: 0 30rpx;
			background-color: #FFFFFF;
		}

		.content {
			padding: 32rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F5F5F5;
		}

		text {
			display: block;
		}

		.title {
			flex: 1;
			font-size: 32rpx;
			font-weight: 500;
			color: #444444;
		}

		.avatar {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}

		.arrow {
			margin-left: 30rpx;
			width: 12rpx;
			height: 22rpx;
		}

		.phone {
			font-size: 32rpx;
			font-weight: bold;
			color: #909090;
		}

		.nickname {
			font-size: 32rpx;
			font-weight: bold;
			color: #141414;
			flex: 1;
			min-width: 0;
			text-align: right;
		}

		.solt-content {
			padding: 40rpx 40rpx;

			.tips {
				margin-bottom: 30rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #141414;
			}

			.line {
				margin-top: 20rpx;
				width: 100%;
				height: 2rpx;
				background: #F5F5F5;
			}

			.btn-group {
				margin-top: 80rpx;
				display: flex;
			}

			.cancel {
				margin-right: 40rpx;
				flex: 1;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #767676;
				border: 2rpx solid #F5F5F5;
				border-radius: 6rpx;
			}

			.save {
				flex: 1;
				text-align: center;
				line-height: 80rpx;
				border-radius: 6rpx;
				color: #fff;
				font-size: 30rpx;
				border: 2rpx solid #000000;
				background-color: #141414;
			}
		}

		.sign-out-view {
			padding: 16rpx 0;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;

			.sign-out-btn {
				margin: 0 auto;
				width: 600rpx;
				line-height: 90rpx;
				background: #141414;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				border-radius: 8rpx;
			}
		}

	}
</style>
